<template>
  <div class="app-container">
    <el-card shadow="never" style="border-radius: 8px" class="card divtop">
      <div class="header"><span class="header-icon"></span><span class="header-title">选择视频</span></div>

      <div class="container">
        <div class="left-column">选择视频({{ parasm.video_num }}) </div>
        <div class="right-column" @click="handleClickCHooseVideoPath">
          <el-input readonly v-model="parasm.video_path"   placeholder="请选择视频"></el-input>
        </div>
      </div>

      <div class="desc">发布成功后,将会删除已经发布的视频,确保发布视频不重复</div>

    </el-card>

    <el-card shadow="never" style="border-radius: 8px" class="card divcontent">
      <div class="header"><span class="header-icon"></span><span class="header-title">选择账号</span></div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) of tabsList" :key="index">
          <div class="container">
            <div class="left-column">发布账号</div>
            <div class="right-column">
              <div class="firstdiv" @click="handleClickButtonDialog">
                <div class="box">
                  <i class="el-icon-circle-plus icon"></i>
                </div>
              </div>

              <div class="firstdiv" v-for="(acc,index) of item.account" :ke="index">
                <div class="box">
                  <img :src="acc.headImgUrl"/>
                </div>
              </div>

            </div>
          </div>
        </el-tab-pane>

      </el-tabs>
    </el-card>


    <el-card shadow="never" style="border-radius: 8px" class="card divbottom">
      <div class="header"><span class="header-icon"></span><span class="header-title">配置参数</span></div>

      <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="视频标题" prop="name">
          <el-input class="c-input_inner" style=" margin-bottom: 10px;" placeholder="填写标题，可能会有更多赞哦～"
                    v-model="form.title"
                    show-word-limit maxlength="20"/>
        </el-form-item>

        <el-form-item label="视频简介" prop="name">
          <el-input show-word-limit :rows="3" v-model="form.description" style=" margin-bottom: 10px;" type="textarea"
                    maxlength="1000"
                    class="post-content" placeholder="填写更全面的描述信息，让更多的人看到你吧！"></el-input>
        </el-form-item>

        <!--        <el-form-item label="权限设置" prop="region">-->
        <!--          <el-radio-group v-model="form.mold">-->
        <!--            <el-radio :label="0">公开(所有人可见)</el-radio>-->
        <!--            <el-radio :label="1">私密(仅自己可见)</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="挂载锚点">-->
        <!--          <el-radio-group v-model="form.point">-->
        <!--            <el-radio :label="0">不挂载</el-radio>-->
        <!--            <el-radio :label="1">位置团购</el-radio>-->
        <!--            <el-radio :label="2">小程序</el-radio>-->
        <!--            <el-radio :label="3">购物车</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="挂载地址">-->
        <!--          <el-input placeholder="请输入内容" class="input-with-select" v-model="form.address">-->
        <!--            <el-select slot="prepend" style="width: 90px;background-color: #f0f0fd;" v-model="form.address_choose"-->
        <!--                       placeholder="请选择">-->
        <!--              <el-option label="团购" :value="0"></el-option>-->
        <!--              <el-option label="抖音商店" :value="1"></el-option>-->
        <!--              <el-option label="小程序" :value="2"></el-option>-->
        <!--            </el-select>-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->


        <el-form-item label="发布时间">
          <el-radio-group v-model="form.publishing_time_choose">
            <el-radio :label="0">立即发布</el-radio>
            <el-radio :label="1">定时发布</el-radio>
          </el-radio-group>

          <el-date-picker
            v-if="form.publishing_time_choose==1"
            v-model="form.publishing_time"
            type="date"
            default-time="12:00:00"
            value-format="timestamp"
            style="width: 200px;margin-left: 12px" size="mini"
            placeholder="选择日期时间">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="发布间隔">
          <el-radio-group v-model="form.publishing_choose">
            <el-radio :label="0">随机间隔</el-radio>
            <el-radio :label="1">固定间隔</el-radio>
          </el-radio-group>
          <el-input-number style="width: 120px;margin-left: 12px" size="mini" v-if="form.publishing_choose==1" :min="1"
                           :max="10000" label="秒" v-model="form.publishing_interval"></el-input-number>

        </el-form-item>
      </el-form>


      <div class="submit" style="margin-top: 20px;margin-left: 24px">
        <el-button style="width: 172px;" size="medium" type="primary" @click="handleCLickVideoPUblish">立即发布
        </el-button>
      </div>

      <!--  </div>-->
    </el-card>
    <MediaAccountdialog ref="MediaAccountdialog" :confirm="handleConfirm"
                        :show-child-dialog.sync="dialogMediaAccountVisible"></MediaAccountdialog>

  </div>
</template>

<script>


import {ipcApiRoute} from "@/api/main";

export default {
  name: "VideoPush",
  components: {},
  data() {
    return {
      activeName: 'first',
      dialogMediaAccountVisible: false,
      parasm: {
        video_num: 0,
        video_path: ""
      },
      tabsList: [
        {
          label: "视频号",
          name: 'first',
          account: []
        },
        // {label: "小红书", name: 'second'},
        // {label: "抖音", name: 'third'},
        // {label: "快手", name: 'fourth'},
      ],

      form: {
        title: undefined,
        description: undefined,
        mold: 1,
        point: 0,
        address: undefined,
        address_choose: 0,
        publishing_time_choose: 0,
        publishing_time: undefined,
        publishing_choose: 0,
        publishing_interval: 1,

      },
    };
  },
  created() {

  },
  methods: {
    getList() {
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    handleConfirm(value) {
      for (let item of value) {
        this.tabsList[0]["account"].push(item)
      }
      console.log('父组件接收到的值：', value)
    },
    handleClickButtonDialog() {
      this.dialogMediaAccountVisible = true
    },
    /**
     * 选择文件
     * 0 选择文件，1选择目录
     * */
    async handleClickCHooseVideoPath() {
      const path_list = await this.$ipc.invoke(ipcApiRoute.system.selectFolder, {type: 0})
      if (path_list) {
        this.parasm.video_num = path_list.length
        // this.parasm.video_path = path_list.join(';')
        this.parasm.video_path = path_list[0]
        return true
      }
      return this.$message.warning("请选择有效文件")
    },

    convertCookies(cookies) {
      let cookieString = ''
      const Cookies = JSON.parse(cookies)
      for (let cookie of Cookies) {
        cookieString += `${cookie['name']}=${cookie['value']}; `
      }
      return cookieString
    },
    async handleCLickVideoPUblish() {

      if(!this.parasm.video_path){
        return this.$message.error("视频不能为空")
      }



      for (let account of this.tabsList[0]["account"]) {

        let args = {
          cookies: this.convertCookies(account.cookies),
          _log_finder_id: account.finderUsername,
          _log_finder_uin: account.ownerWxUin,
          filePath: this.parasm.video_path,
          description: this.form.description,
          link: undefined,
          shortTitle: undefined,
          mode: 1,
          effectiveTime: this.form.publishing_time_choose==1? Math.ceil(this.form.publishing_time/1000) :undefined,
        }
        const result = await this.$ipc.invoke(ipcApiRoute.media.channels, args)
        if(result){
          this.$message.success(result.message)
        }else{
          this.$message.error("发布失败")
        }

      }
    }
  }
};
</script>
<style scoped lang="scss">
.app-container {
  //background-color: #eef1f8;
  height: 100vh;
  padding: 0;

  .card {
    margin-bottom: 10px;
    border: none;
  }

  .divtop {


    .desc {
      font-size: 13px;
      color: #9d9e9e;
      margin-top: 10px;
    }
  }

  .divcontent {

    .firstdiv {
      margin-right: 10px;
      height: 45px;
      width: 45px;
      cursor: pointer;

      color: #3a68ff;
      border: 1px solid #325afc;
      border-radius: 7px;
      overflow: hidden;
      display: inline-block;

      .box {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .icon {
        font-size: 30px;

        padding: 3px;
      }

      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
    }
  }

  .divbottom {
    .demo-ruleForm {
      padding-right: 500px;
    }
  }

  .container {
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中对齐 */
  }

  .left-column {
    color: #565656;
    font-size: 14px;
  }

  .right-column {

    //display: flex;
    //white-space: nowrap;
    margin-left: 20px;
    min-width: 400px;
    max-width: 800px;
    white-space: nowrap;
    overflow-x: auto;
  }

}

.header {
  line-height: 28px;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 24px;

  .header-icon {
    position: relative;
    top: 2px;
    display: inline-block;
    width: 6px;
    height: 18px;
    background: #3a64ff;
    border-radius: 3px;
    margin-right: 2px;

  }

  .header-title {
    font-weight: 500;
    margin-left: 4px;
  }
}

::v-deep .el-form-item__label {
  font-weight: 400;
}
</style>
